<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h2>Expandable Datatable</h2>
<h:body>
	<h:form id="jsfexample">
		<p:panelGrid columns="2">
			<f:facet name="header">  
                Basic PanelGrid  
           </f:facet>
			<h:outputLabel for="key" value="Enter key" />
			<p:inputText id="key" value="#{manager.key}" />

			<h:outputLabel for="value" value="Enter value" />
			<p:inputText id="value" value="#{manager.value}" />

			<p:commandButton action="#{manager.save}" update="mydata"
				value="Save" icon="ui-icon-check" style="margin:0" />


			<h:messages />


		</p:panelGrid>

		<p:dataTable value="#{manager.cacheList}" var="item" id="mydata">
			<p:column style="width:16px">
				<p:rowToggler />
			</p:column>
			<p:column style="width:150px">

				<f:facet name="header">Key</f:facet>
				<h:outputText value="#{item.key}" />

			</p:column>
			<p:column style="width:150px">

				<f:facet name="header">Value</f:facet>
				<h:outputText value="#{item.value}" />

			</p:column>
			<p:rowExpansion>
				<h:panelGrid id="display" columns="2" cellpadding="4"
					style="width:300px;" styleClass="ui-widget-content"
					columnClasses="label, value">



					<h:outputText value="Extra data:" />
					<h:outputText id="extra" value="#{item.random}" />

					<h:outputText value="Date:" />
					<h:outputText id="date" value="#{item.date}" />

				</h:panelGrid>

			</p:rowExpansion>
		</p:dataTable>
	</h:form>
</h:body>
</html>